import React, {useRef} from 'react';
import {Button} from "antd";
import ReactDOM from 'react-dom';

// 类式组件
// class Demo extends React.Component {
//     state={count:0}
//     myRef = React.createRef()
//
//     add= ()=>{
//         const {count} = this.state
//         this.setState({count:count+1})
//     }
//
//     unmount= ()=>{
//         //卸载根结点
//         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
//     }
//     show= ()=>{
//         //卸载根结点
//         alert(this.myRef.current.value)
//     }
//     componentDidMount() {
//         // count自增长
//         this.timer = setInterval(()=>{
//             this.setState({count:this.state.count+1})
//         },500)
//     }
//     //预卸载
//     componentWillUnmount(){
//         //卸载定时器
//         clearInterval(this.timer)
//     }
//
//     render() {
//         return (
//             <div>
//                 <input type="text" ref={this.myRef}></input>
//                 <h2>当前值为：{this.state.count}</h2>
//                 <Button onClick={this.add}>点我+1</Button>
//                 <Button onClick={this.unmount}>卸载</Button>
//                 <Button onClick={this.show}>展示</Button>
//                 Demo
//             </div>
//         );
//     }
// }

//函数式组件
function Demo (){

    const [count,setCount] = React.useState(0)
    const [name,setName] = React.useState('zhangSan')
    const myRef = useRef()
    //[]中不写
    React.useEffect(()=>{
        let timer = setInterval(()=>{
            setCount(count=>count+1)
        },500)
        return ()=>{
            clearInterval(timer)
        }
        // console.log(11111)
    },[])

    function add (){
        setCount(count+1)
    }
    function getName (){
        setName('liSi')
    }
    function unmount (){
        //卸载根结点
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    function show (){
        alert(myRef.current.value)
    }

    return (
        <div>
            <input type="text" ref={myRef}/>
            <h2>当前值为：{count}</h2>
            <h2>当前姓名为：{name}</h2>
            <Button onClick={add}>点我+1</Button>
            <Button onClick={getName}>换名点我</Button>
            <Button onClick={unmount}>卸载</Button>
            <Button onClick={show}>展示</Button>
        </div>
    )
}

export default Demo;